<template>
  <div id="app" class="studentReportSemester">
    <sk-table-header ref="skTableHeader" @dataFrom="getDataFrom" @export="handleDownload"></sk-table-header>
    <a-card :bordered="false" id="reportAreaSem">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          {{stuData}}数据报告
        </div>
      </div>
      <a-spin tip="正在导出..." :spinning="spinning">
        <Table ref="table" :dataForm="dataForm" :tableData="tableData"></Table>
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" header="1. 运动数据">
            <Sport ref="SportRef" :data="chartData"  :dataForm="dataForm" v-if="showView['1']" @ok="handleOk"></Sport>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="2. 心率数据">
            <HeartRate ref="HeartRateRef" :data="chartData"  :dataForm="dataForm" v-if="showView['2']" @ok="handleOk"></HeartRate>
          </a-collapse-panel>
        </a-collapse>
      </a-spin>
    </a-card>
  </div>
</template>
<script>

import html2canvas from "html2canvas" //网页转换为图片
import HeartRate from './heartRate/HeartRate.vue'
import Sport from './heartRate/Sport.vue'
import skTableHeader from './heartRate/skTableHeader.vue'
import Table from "./heartRate/Table.vue";
import { getAction } from '@/api/manage'
export default
{
  name: 'studentReportSemester',
  components: {
    HeartRate,
    Sport,
    skTableHeader,
    Table
  },
  props:[],
  data() {
    return {
      url:{
        list:"/health/heart/data"
      },
      activeKey:['1'],
      showView: {
        '1':false,
        '2':false
      },
      tableData:[],
      chartData:[],
      dataForm: {
      },
      exportList:[],
      exportFlag:false,
      spinning:false,
      stuData:""
    }
  },
  filters: {},
  
  computed: {
  },
  
  created() {
  },
  
  activated() {
  },
  
  watch: {
    activeKey:{
      immediate:true,
      handler(key) {
        const lastKey = this.activeKey[this.activeKey.length-1]
        this.showView[lastKey] = true
      }
    },
    dataForm:{
      handler(newval){
        this.stuData = (newval.gradeName  + "-") + (newval.className ? newval.className + ' ' : "") + (newval.className ? newval.stuName + "-" : "") + (newval.dateTypeName ? newval.dateTypeName + "-" : "") ;
      },
      immediate:true,
      deep:true
    }
  },
  mounted() {
  },

  methods: {
    // 获取参数
    getDataFrom(dataForm){
      this.dataForm = dataForm;
      this.$nextTick(()=>{
        this.$refs.table.handleLoding();
        const params = {
          classType:dataForm.gradeId,
          classId:dataForm.classId,
          studentId:dataForm.stuId,
          startDate:dataForm.startDate,
          endDate:dataForm.endDate,
          dateType:dataForm.dateType,
          courseType:dataForm.courseType
        }
        getAction(this.url.list,params).then((res)=>{
          this.tableData = res.result.table;
          this.chartData = res.result.chart.data;
          this.$refs.table.handleLoding();
          this.showActiveKey();
        })
      })
    },
    showActiveKey(){
      this.showView['1'] = this.activeKey.findIndex(key => key == '1') > -1
      this.showView['2'] = this.activeKey.findIndex(key => key == '2') > -1
      this.$nextTick(()=>{
        this.activeKey.forEach(key => {
          switch(key){
            case '1':
              this.$refs.SportRef.initStudentChart();
              break;
            case '2':
              this.$refs.HeartRateRef.initStudentChart();
              break;
          }
        })
      })
    },
    // 导出
    handleDownload() {
      // 转换成canvas
      this.exportFlag = true;
      this.spinning = true;
      this.exportList = []
      this.activeKey.push("1","2")
      this.showActiveKey();
    },
    handleOk(){
      this.exportList.push(true);
      if (this.exportFlag && this.exportList.length == this.activeKey.length) {
        this.spinning = false;
        setTimeout(() => {
          this.exportPng();
        }, 500);
      }
    },
    exportPng(){
      let that = this;
      html2canvas(document.getElementById("reportAreaSem")).then(function (canvas) {
        var img = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = that.stuData + "心率数据.png"; // 设置下载的文件名，
        creatIMg.href = img; // 下载url
        document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
        that.activeKey = ["1"];
        
      });
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-card-body{
  padding: 10px;

  .ant-card-head-title {
    font-size: 18px;
    font-weight: 600;
  }
}
 
</style>